import React, {useState, useEffect} from "react";

const btnStyle = {
    border: 'none',
    backgroundColor: 'black',
    color: 'white',
    padding: '10px'
};

const Index: React.FC<{ num: number }> = ({num}) => {

    const [sec, setSe] = useState(num);
    useEffect(() => {
        console.log(setSe);
        let id: any;
        if (sec > 0) {
            id = setInterval(() => {
                setSe(sec => sec - 1);
                // 此时setCount里面的函数的入参是前一次render之后的count值，所以这样的情况下计时器可以work
            }, 1000);
            return () => {
                clearInterval(id)
            }
        }
    }, [sec]);
    return (
        <div>
            <button type={"button"} style={btnStyle}>按钮{sec}</button>
        </div>
    );
};

export default Index
